/*
 * @Author: yuki
 * @Date: 2025-11-04 09:48:14
 * @LastEditTime: 2025-11-04 13:53:06
 * @Description: 404 页面
 */
import Lottie from 'lottie-web';
import { memo, useEffect, useRef } from 'react';
import type { FC, ReactNode } from 'react';

import { animationData } from './data';

interface IProps {
  children?: ReactNode;
}

const NotFound: FC<IProps> = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 初始化动画
    const animItem = Lottie.loadAnimation({
      container: containerRef.current!,
      renderer: 'svg',
      loop: true,
      animationData: JSON.parse(animationData)
    });

    return () => {
      animItem.destroy();
    };
  }, []);

  return (
    <div className='not-found-page relative h-[calc(100vh-64px)] w-full flex items-center justify-center bg-white'>
      <div
        ref={containerRef}
        className='not-found-svg_container w-[640px] h-[512px]'
      ></div>
    </div>
  );
};

export default memo(NotFound);
